<!--支付单列表页-->
<template>
  <div class="nissin-list-box">
    <el-container class="template-box">
      <!-- tab切换 -->
      <tabs
        is-new-tabs
        :active-index="tabIndex"
        :tabs-arr="indexTabsArr"
        @returnIndex="tabsHandle"
      />
      <!--搜索-->
      <el-header height="auto">
        <SearchForm
          label-width="110px"
          :data="indexSearchData"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading="submitLoading"
        />
      </el-header>
      <!--列表-->
      <!-- 支付订单状态tradeOrderStatus 1=待付款，2=已付款，3=已撤销，4=部分付款，5=已完结 -->
      <el-editable
        v-loading="submitLoading"
        :data="dataList"
        height="400"
        :columns="columsData">
        <template
          slot="default-action"
          slot-scope="scope">
          <el-button
            size="small"
            v-if="[1,4].includes(scope.row.tradeOrderStatus)"
            @click.stop="payment(scope.row)"
            type="text text-primary"
          >付款</el-button>
          <!-- <el-button
            size="small"
            v-if="scope.row.tradeOrderStatus === 1"
            @click.stop="revocation(scope.row)"
            type="text text-primary"
          >撤销</el-button> -->
          <el-button
            size="small"
            @click.stop="toOrderDetail(scope.row)"
            type="text text-primary">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <pagination
        ref="page"
        :request-func="getList"
        @returnData="getTableData"
      />
      <!--撤销弹窗-->
      <el-dialog
        title="提示"
        :visible.sync="showRevocation"
        width="30%"
        :before-close="handleClose">
        <span style="text-align:center;">是否确定撤销该支付订单？</span>
        <span
          slot="footer"
          class="dialog-footer">
          <el-button @click="showRevocation = false">取 消</el-button>
          <el-button
            type="primary"
            @click="confirm()">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import {
  hospitalSettleQuaryTradePayList,
  hospitalSettleTradePayStatusCount,
  hospitalSettleBackoutTradePayOrder
} from '@const/beforeSettleApi'
import { indexTabsArr, indexSearchData, columsData } from './const'
import tabs from '@components/tabs/index.vue'
import Pagination from '@components/custom-pagination'
import ElEditable from '@components/el-editable'
import SearchForm from '@components/businesscomponents/search'
import { hasIn, cloneDeep } from 'lodash'
import { formatDate } from '@const/filter'
export default {
  components: { tabs, ElEditable, SearchForm, Pagination },
  data () {
    return {
      tabIndex: 5,
      indexTabsArr: cloneDeep(indexTabsArr), // tab切换内容
      tabIndexVal: '',
      indexSearchData, // 搜索字段
      searchData: {}, // 搜索内容
      columsData, // 列表表头
      dataList: [], // 列表内容
      revocationID: '',
      showRevocation: false, // 弹窗显示
      submitLoading: false,
      curPage: 1 // 当前页
    }
  },
  mounted () {
    this.getCount()
  },
  methods: {
    // 获取列表
    async getList () {
      this.submitLoading = true
      const body = {
        ...this.searchData,
        tradeOrderStatus: this.tabIndexVal,
        ...this.$refs.page.page
      }
      return this.$axios.$post(hospitalSettleQuaryTradePayList, body)
    },
    // 获取列表数据
    getTableData (data) {
      this.dataList = data || []
      this.submitLoading = false
    },
    // 根据状态获取对应数量
    async getCount () {
      const res = await this.$axios.$get(hospitalSettleTradePayStatusCount)
      let arr = hasIn(res, 'payload') ? res.payload : []

      const cloneIndexTabs = cloneDeep(indexTabsArr)
      let allCount = null // 全部的数量
      arr.forEach(item => {
        allCount += item.orderCount
      })

      // 获取对应tab值
      cloneIndexTabs.forEach(item => {
        arr.forEach(ite => {
          if (ite.orderStatus === item.val) {
            item.badge = { value: ite.orderCount || null }
          }
        })
      })
      cloneIndexTabs[5].badge.value = allCount || null
      this.indexTabsArr = cloneIndexTabs
    },
    // tab处理事件
    tabsHandle (index) {
      this.tabIndexVal =
        this.indexTabsArr[index].val === 'null'
          ? null
          : this.indexTabsArr[index].val
      this.curPage = 1
      this.$refs.page.Refresh()
    },
    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
    },

    // 点击重置
    resetForm (condition) {
      this.searchData = condition
      this.$refs.page.Refresh()
    },
    // 付款
    payment (val) {
      this.$router.push({
        path:
          `${this.$route.path}/change`,
        query: {
          type: 'pay',
          id: val.tradeId
        }
      })
    },
    // 撤销
    revocation (val) {
      this.showRevocation = true
      this.revocationID = val.tradeId
    },
    // 详情
    toOrderDetail (val) {
      this.$router.push({
        path:
          `${this.$route.path}/change`,
        query: {
          type: 'detail',
          id: val.tradeId
        }
      })
    },
    // 弹窗关闭
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 弹窗确定
    confirm () {
      this.$axios
        .$post(hospitalSettleBackoutTradePayOrder, {
          tradeId: this.revocationID
        })
        .then(res => {
          if (res.msg === 'ok') {
            this.$message({ type: 'success', message: '撤销成功' })
            this.showRevocation = false
            this.getList()
            // this.$router.go(-1)
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../m-front-common/pc/assets/var.less';
.nissin-list-box {
  background: @bgColor;
  .el-header {
    background: #fff;
    padding: 8px;
    margin-bottom: 8px;
  }
  .template-box {
    height: 100%;
    overflow: auto;
    .el-dialog {
      .el-dialog__body {
        text-align: center;
        padding: 50px 20px;
      }
    }
  }
}
</style>
